<template>
<!--<div>-->
<!--    <span v-show="cafesLoadStatus==1">加载中...</span>-->
<!--    <span v-show="cafesLoadStatus==2">加载完成</span>-->
<!--    <span v-show="cafesLoadStatus==3">加载失败</span>-->
<!--    <ul>-->
<!--        <li v-for="cafe in cafes">{{cafe.name}}</li>-->
<!--    </ul>-->
<!--</div>-->
    <div>
        <div class="grid-container">
            <div class="grid-x">
                <div class="large-12 medium-12 small-12 column">
                    <router-link class="add-cafe-button"
                                 :to="{name:'newcafe'}"
                                 v-if="user!=''&&userLoadStatus==2">
                        +添加CAFE
                    </router-link>
                    <a class="add-cafe-text"
                       v-if="user==''&&userLoadStatus!=2"
                       v-on:click="login">
                        登录后添加咖啡店
                    </a>
                </div>
            </div>
        </div>
        <cafe-filter></cafe-filter>
        <div class="grid-container">
            <div class="grid-x grid-padding-x">
                <loader v-show="cafesLoadStatus == 1" :width="100" :height="100"></loader>
                <cafe-card v-for="cafe in cafes" :key="cafe.id" :cafe="cafe"></cafe-card>
            </div>
        </div>
    </div>

</template>

<script>
    import CafeFilter from "../components/cafes/CafeFilter";
    import Loader from "../components/global/Loader";
    import CafeCard from "../components/cafes/CafeCard";
    import {EventBus} from "../event-bus";

    export default {
        name: "Home",
        components:{
            CafeFilter,
            Loader,
            CafeCard,
        },
        created() {
            //this.$store.dispatch('loadCafes');
        },
        computed:{
            cafesLoadStatus(){
                return this.$store.getters.getCafesLoadStatus;
            },
            cafes(){
                //console.log(this.$store.getters.getCafes);
                return this.$store.getters.getCafes;
            },
            user(){
                return this.$store.getters.getUser;
            },
            userLoadStatus(){
                return this.$store.getters.getUserLoadStatus();
            },
        },
        methods:{
            login(){
                EventBus.$emit('go-login')
            }
        }
    }
</script>

<style lang="scss">
    @import '~@/abstracts/_variables.scss';

    div#home{
        a.add-cafe-button{
            float: right;
            display: block;
            margin-top: 10px;
            margin-bottom: 10px;
            background-color: $dark-color;
            color: white;
            padding-top: 5px;
            padding-bottom: 5px;
            padding-left: 10px;
            padding-right: 10px;
        }
    }
</style>
